<template>
  <div>
    <van-nav-bar title="购物车"
                 left-text="返回"
                 right-text="批量删除"
                 left-arrow
                 @click-left="onClickLeft"
                 @click-right="onClickRight" />
    <div class="cart_wrap">
      <div class="shop"
           v-for="(item,index) in info"
           :key="index">
        <div class="shop_title">
          <van-checkbox v-model="item.shop[item.shop.length-1].shopall"
                        @click="checkShopAll(item.shop[0].shop_id,item.shop[item.shop.length-1].shopall)"></van-checkbox>
          <h2>{{item.shop[0].shop_name}}</h2>
        </div>
        <div class="shop_list">
          <van-swipe-cell v-for="(cartItem,index) in item.shop"
                          :key="index">
            <template #right>
              <van-button square
                          type="danger"
                          text="删除"
                          @click="delCart(cartItem.shop_id,cartItem.goods_id)" />
              <van-button square
                          type="primary"
                          text="收藏" />
            </template>
            <div class="shop_one">
              <van-checkbox v-model="cartItem.is_checked"
                            @click="checkOne(cartItem.shop_id,cartItem.goods_id,cartItem.is_checked,cartItem.sku_id)"></van-checkbox>
              <img :src="cartItem.goods_pic">
              <div class="cart_info">
                <p class="pname">{{cartItem.goods_name}}</p>
                <div>
                  <p style="color:red;font-size:20px;">{{cartItem.origin_price}}</p>
                  <van-stepper v-model="cartItem.goods_num"
                               @plus="updataNum(cartItem,++cartItem.goods_num)"
                               @minus="updataNum(cartItem,--cartItem.goods_num)" />
                </div>
              </div>
            </div>
          </van-swipe-cell>

        </div>
      </div>
    </div>
    <!-- 底部条件订单 -->
    <van-submit-bar :price="total_price"
                    button-text="提交订单"
                    @submit="onSubmit">
      <van-checkbox v-model="allcheck"
                    @click="cartAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>
<script>
import { getCartListApi, delCartApi, checkOneApi, checkShopAllApi, cartAllApi, updateNumApi } from '../../api/cart'
import { mapActions } from 'vuex';
export default {
  name: "cart",
  data () {
    return {
      info: [],
      total_price: 0,
      allcheck: false,
      cartListids: []//要下单的商品id集合
    }
  },
  created () {
    // 获取购物车列表信息
    getCartListApi().then(res => {

      this.changeCheckData(res);//处理单选和全选数据
      console.log(this.info)
    })
  },
  methods: {
    ...mapActions("addressStore", ["getAddressAction"]),
    // 数据处理方法
    changeCheckData (res) {
      this.info = res.data.info;
      this.total_price = Number(res.data.total_price) * 100;
      var allflag = true; //整个购物车的全选标识
      this.info.forEach(element => {
        var flag = true;  //店铺全选标识
        element.shop.forEach(ele => {
          ele.is_checked = ele.is_checked == "0" ? false : true
          if (!ele.is_checked) {

            flag = false;
            allflag = false;
          }
          ele.shopall = flag;//给每个商品添加店铺的全选条件
        })

      })
      if (allflag) {  //购物车全选标识判断
        this.allcheck = true;
      } else {
        this.allcheck = false;
      }
    },
    async updataNum (cartItem, num) {  //更新购物车数量
      var res = await updateNumApi(cartItem.shop_id, cartItem.goods_id, cartItem.sku_id, num)
      this.changeCheckData(res)
    },
    async checkShopAll (shopid, check) { //店铺全选和反选
      var mycheck = check ? "1" : "0"
      var res = await checkShopAllApi(shopid, mycheck)
      this.changeCheckData(res)
    },
    async checkOne (shopid, goodid, is_checked, skuid) {  //单个选中
      var mycheck = is_checked ? "1" : "0"
      var res = await checkOneApi(shopid, goodid, mycheck, skuid)
      console.log(res)
      this.changeCheckData(res)
    },
    async cartAll () { //购物车全选
      var mycheck = this.allcheck ? "1" : "0"
      var res = await cartAllApi(mycheck)
      this.changeCheckData(res)
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    onClickRight () { },
    // 删除接口
    async delCart (shopid, gid) {
      var res = await delCartApi(shopid, gid)
      console.log(res)
      this.info = res.data.info;
      this.total_price = Number(res.data.total_price) * 100;
    },
    onSubmit () { //提交订单
      this.getAddressAction()//获取地址
      // 处理所有选中要下单的商品id
      this.cartListids = [];
      this.info.forEach((element => {
        element.shop.forEach(ele => {
          if (ele.is_checked) {
            this.cartListids.push(ele.id)
          }
        })
      }))
      // 跳转并传递ids 数据
      this.$router.push({ name: "order", query: { ids: this.cartListids.join() } });
    }
  }
}
</script>
<style lang="less">
.cart_wrap {
  .shop {
    .shop_title {
      display: flex;
      width: 100%;
      padding: 0 40px;
      box-sizing: border-box;
      border-bottom: 1px solid #ccc;
      line-height: 80px;
      h2 {
        margin-left: 30px;
      }
    }
    .shop_list {
      .shop_one {
        display: flex;
        margin: 10px 0;
        background: white;
        height: 300px;
        align-items: center;
        .van-checkbox {
          margin-left: 30px;
        }
        img {
          width: 200px;
          height: 200px;
          margin-left: 30px;
        }
        .cart_info {
          flex: 1;
          margin-left: 20px;
          line-height: 60px;
          div {
            display: flex;
            justify-content: space-between;
          }
        }
      }
      .van-button--square {
        height: 100%;
      }
    }
  }
}
.pname {
  height: 90px !important;
  line-height: 45px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.van-submit-bar {
  bottom: 48px;
}
</style>